<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

</style>
</head>
<body>

<ol>
	<li>使用子路由 children 的时候，path路径时不要带 /。 否则永远以根路径开始请求，这样做不方便用户理解路径的层次。也是为了把路径的层次给很好的展示出来 </li>
</ol>



<div id="app">

	
	<router-link to='/account'>Account</router-link>
	<router-view>  </router-view>

  
</div>
  

<template id="tmp1">
<div>	

	<h1>这是Account组件</h1>
	<router-link to='/account/login'> 登录 </router-link>
	<router-link to='/account/register'> 注册 </router-link>
	<router-view></router-view>

</div>
</template>


<br>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script type="text/javascript">

var account = {
	template:'#tmp1'
}

var login = {
	template:'<h1>登录</h1>'
}

var register = {
	template:'<h1>注册</h1>'
}




var router = new VueRouter({

	routes:[
		{	path:'/account',
			component:account,
			children:[
					{ path:'login',component:login },
					{ path:'register',component:register }
			]
	},

	]

})




var  vm= new Vue({
  el: '#app',

  data: {
  	 
  },

  methods:{

  },

  router



})





</script>

	
</body>
</html>